import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import Header from "../Order/children/header";
import AppScroll from "../../../components/app-scroll";
import Loading from "../../../components/app-loading/Loading";
import { renderRoutes } from "react-router-config";
import OrderItem from "./children/orderItem";
import { useHistory } from "react-router-dom";
import OrderBar from "./children/orderBar";
import "./style.scss";
export default function Root() {
    const dispatch = useDispatch();
    const isLogin = useSelector(
        (state) => state.getIn(["login", "loginStatus"]) === 2 //2表示登录过且有效
    );
 
    const orderData = useSelector((state) => state.getIn(["order", "data"]));
    const loading = useSelector((state) => state.getIn(["order", "loading"]));
    useEffect(() => {
        // 请求数据
        if (isLogin) {
            dispatch({
                type: "order/get_cart_order_goods",
            });
        }
    }, [dispatch, isLogin]);
   
    return (
            <div className="page" id="order-root">
                {loading && <Loading />}
                <Header />
                <AppScroll className="cart-scroll">
                    {orderData.map((item) => (
                        <OrderItem key={item.get("_id")} data={item} />
                    ))}
                </AppScroll>
                <OrderBar />
            </div>
    );
}
